<template>
  <div class="listItem-wrap">
    <!-- <template v-if="curTab !== '1'">
      <template v-if="curTab === '2'">
        <div class="listItem-hd" :style="2 | filterHdSty">
          <span>{{ item.exitType | filterExitHd }}</span>
          <span>{{ item.exitTime }}</span>
        </div>
      </template>
      <template v-else>
        <div class="listItem-hd" :style="item.status | filterHdSty">
          {{ item.status | filterHd }}
        </div>
      </template>
    </template> -->
    <div class="listItem_status" v-if="curTab == 0">
      <div class="left" :style="item&&item.status | filterHdSty">
        {{ item.status | filterHd }}
      </div>
      <div class="right" v-show="item.status == 3">插件到期，系统拒绝</div>
    </div>
    <div class="listItem_status2" v-if="curTab == 2">
      <div class="left">{{item.exitType == 1?'邀请者取消合作':'本商户取消合作'}}</div>
      <div class="right">
        {{ item.exitTime }}
      </div>
    </div>
    <div class="listItem-con" @click="onClick">
      <!-- <div class="listItem-con_item">
                <p class="left">{{ item.businessName }}</p>
                <p class="right">{{ item.mobilePhone }}</p>
            </div>
            <div class="listItem-con_item origin">
                <p class="left">优惠折扣：{{ item.discount }}折</p>
                <p class="right">抽佣比例：{{ item.rakeRate }}%</p>
            </div>
            <div class="listItem-con_item new" v-if="curTab === '1' && (item.afterDiscount || item.afterRakeRate)">
                <p>
                    <span v-if="item.afterDiscount">新折扣：{{ item.afterDiscount }}折</span>
                </p>
                <p>
                    <span v-if="item.afterRakeRate">新比例：{{ item.afterRakeRate }}%</span>
                </p>
            </div> -->

      <div class="content top">
        <div class="left">{{ item.businessName }}</div>
        <div class="right">{{ item.mobilePhone }}</div>
      </div>
      <div class="content">
        <div class="left">
          <img class="_img" :src="icons[0]" alt="" /> 出资方：{{
            item.financingParty == 1? "邀请商户": item.financingParty == 2? "本商户": ""
          }}
          <span v-if="item.afterFinancingParty!='null'&&curTab === '1'" style="color: red;">{{ item.afterFinancingParty == 1 ? '（邀请商户）' : '（本商户）' }}</span>
          <van-icon name="question-o" color="#ffb72f" @click="showMsg()" />
        </div>
        <div class="right look_order" v-show="curTab != 0" @click="toOrderList(item.businessId)">
          查看订单<van-icon name="arrow" color="#ffb72f" />
        </div>
      </div>
      <div class="content">
        <div class="left">
          <img class="_img" :src="icons[1]" alt="" />优惠折扣：{{
            item.discount
          }}折<span v-if="curTab === '1' && item.afterDiscount!='null'" style="color: red;"
            >(新折扣：{{ item.afterDiscount }}折)</span
          >
        </div>
      </div>
      <div class="content">
        <div class="left">
          <img class="_img" :src="icons[2]" alt="" />抽佣比例：{{
            item.rakeRate
          }}%
          <span v-if="curTab === '1' && item.afterRakeRate!='null'" style="color: red;"
            >(新比例：{{ item.afterRakeRate }}%)</span
          >
        </div>
      </div>
      <div class="content">
        <div class="left">
          <img class="_img" :src="icons[3]" alt="" />积分抵扣比例：{{
            item.deductionRatio
          }}%
          <p v-if="curTab === '1'&&item.afterDeductionRatio!='null'" style="color: red;">(新比例：{{ item.afterDeductionRatio }}%)</p>
          <van-icon name="question-o" color="#ffb72f" @click="showMsg(1)" />
        </div>
      </div>

      <ul class="btns" v-if="curTab !== '2'">
        <template v-if="curTab === '0' && !item.status">
          <li class="btn btn-theme" data-type="refuseJoin">拒绝加入</li>
          <li class="btn btn-fill_confirm" data-type="agreeJoin">同意加入</li>
        </template>
        <template v-if="curTab === '1'">
          <li class="btn btn-blue" data-type="cancel">取消合作</li>
          <li
            class="btn"
            :class="
              item.afterDiscount!='null' || item.afterRakeRate!='null' || item.afterDeductionRatio!='null' || item.afterFinancingParty!='null'
                ? 'btn-theme'
                : 'btn-cancle'
            "
            data-type="refuseModify"
          >
            拒绝修改
          </li>
          <li
            class="btn"
            :class="
              item.afterDiscount!='null' || item.afterRakeRate!='null' || item.afterDeductionRatio!='null' || item.afterFinancingParty!='null'
                ? 'btn-fill_confirm'
                : 'btn-fill_cancle'
            "
            data-type="agreeModify"
          >
            同意修改
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
import { debounce } from "lodash-es";
import {
  appHandleModify,
  cancelCooperation,
  joinBusinessHandleRecord,
} from "@/api/flow/index";
import { dialogBox } from "@/utils/utils";
import { Dialog } from "vant";
import { mapGetters } from "vuex";
// 0:待同意, 1:已同意, 2: 已拒绝 3：已拒绝(时间到期,未同意，系统自动拒绝)
const RECORDSTATUS = {
  0: {
    text: "待同意",
    style: {
      background: "#FFB72F",
    },
  },
  1: {
    text: "已同意",
    style: {
      background: "#4AB759",
    },
  },
  2: {
    text: "已拒绝",
    style: {
      background: "#F05357",
    },
  },
  3: {
    text: "已拒绝(插件到期，系统拒绝)",
    style: {
      background: "#F05357",
    },
  },
};
const EXITTEXT = {
  1: "邀请者取消合作",
  2: "本商户取消合作",
};

// 写到外面的目的：后面有时间用策略抽离封装
function onJoin(params) {
  try {
    dialogBox(
      "confirm",
      {
        title: "提示",
        message: `${
          params.operation === 1 ? "同意" : "拒绝"
        }加入后，超级会员用户下单将${
          !params.operation ? "不" : ""
        }享受折扣优惠。`,
        cancelButtonText: "取消",
        // cancelButtonColor: "#FFB72F",
        confirmButtonText: "确认",
        confirmButtonColor: "#FFB72F",
      },
      function () {
        joinBusinessHandleRecord(params).then((res) => {
          const {
            status,
            data: { code, msg },
          } = res;
          if (status === 200 && code === 0) {
            this.$toast("操作成功");
            let timer = setTimeout(() => {
              this.initList();
              clearTimeout(timer);
              timer = null;
            }, 500);
          } else {
            this.$toast(msg);
          }
        });
      }.bind(this)
    );
  } catch (error) {
    this.$toast("执行异常");
  }
}

function onMonify(params) {
  try {
    const agreeText = params.operation === 1 ? "同意" : "拒绝";
    dialogBox(
      "confirm",
      {
        title: "提示",
        message: `是否${agreeText}修改？${agreeText}后将按照${
          params.operation === 1 ? "新" : "原"
        }内容计算`,
        cancelButtonText: "取消",
        // cancelButtonColor: "#FFB72F",
        confirmButtonText: "确认",
        confirmButtonColor: "#FFB72F",
      },
      function () {
        appHandleModify(params).then((res) => {
          const {
            status,
            data: { code, msg },
          } = res;
          if (status === 200 && code === 0) {
            this.$toast("操作成功");
            let timer = setTimeout(() => {
              this.initList();
              clearTimeout(timer);
              timer = null;
            }, 500);
          } else {
            this.$toast(msg);
          }
        });
      }.bind(this)
    );
  } catch (error) {
    console.log(error);
    this.$toast("执行异常");
  }
}

export default {
  props: {
    item: {
      type: Object,
      required: true,
    },
    // tab的下表
    curTab: {
      type: String | Number,
      required: true,
    },
  },
  computed: {
    ...mapGetters(["dateType", "keepLiveArr"]),
  },
  filters: {
    filterHdSty(status) {
      if(status == undefined||status== null) return
      return `background:${RECORDSTATUS[status].style.background};color:${RECORDSTATUS[status].style.color};`;
    },
    filterHd(status) {
      if(status == undefined||status== null) return
      return RECORDSTATUS[status].text || "";
    },
    filterExitHd(type) {
      if(type == undefined||type== null) return
      return EXITTEXT[type] || "";
    },
  },
  data() {
    return {
      icons: {
        0: require("../../../../assets/img/flow/superIcon_1.png"),
        1: require("../../../../assets/img/flow/superIcon_2.png"),
        2: require("../../../../assets/img/flow/superIcon_3.png"),
        3: require("../../../../assets/img/flow/superIcon_4.png"),
      },
    };
  },
  methods: {
    initList() {
      this.$emit("init");
    },
    showMsg(type) {
      let msg1 = "出资方指优惠折扣或活动优惠的钱由谁承担";
      let msg2 ="指用户可使用积分抵扣金额比例，抵扣的钱邀请商户补贴给合作商户；0%表示用户不可使用积分抵扣；";
      dialogBox(
        "confirm",
        {
          title: "提示",
          message: type ? msg2 : msg1,
          confirmButtonText: "确认",
          confirmButtonColor: "#FFB72F",
          showCancelButton: false,
        },
        () => {}
      );
    },
    toOrderList(businessId){
      let { keepLiveArr } = this;
      if (keepLiveArr.indexOf("surperInvitorsOrderList") == -1) {
        keepLiveArr.push("surperInvitorsOrderList");
        this.$store.commit("setKeepLive", keepLiveArr);
      }
      this.$router.push({path:'/surperInvitorsOrderList',query:{businessId,merchantId:this.$route.query.merchantId}})
    },
    onClick: debounce(function (e) {
      const type = e.target.dataset.type || e.srcElement.dataset.type;
      if (!type) return;
      const _item = this.item;
      const { merchantId } = this.$route.query;
      if (!merchantId) {
        return this.$toast("merchantId不能为空");
      }
      // 待优化
      switch (type) {
        case "refuseJoin":
          onJoin.call(this, {
            id: _item.id,
            merchantId: merchantId,
            operation: 0,
          });
          break;
        case "agreeJoin":
          onJoin.call(this, {
            id: _item.id,
            merchantId,
            operation: 1,
          });
          break;
        case "cancel":
          dialogBox(
            "confirm",
            {
              title: "提示",
              message: "是否取消合作？取消后将不参与当前商户超级会员模式。",
              cancelButtonText: "取消",
              // cancelButtonColor: "#FFB72F",
              confirmButtonText: "确认",
              confirmButtonColor: "#FFB72F",
            },
            () => {
              cancelCooperation({
                id: _item.id,
                merchantId,
              }).then((res) => {
                const {
                  status,
                  data: { code },
                } = res;
                if (status === 200 && code === 0) {
                  this.$toast("操作成功");
                  let timer = setTimeout(() => {
                    this.initList();
                    clearTimeout(timer);
                    timer = null;
                  }, 500);
                }
              });
            }
          );
          break;
        case "refuseModify":
          // 两个都没有的话不能修改
          if(!_item.afterDiscount && !_item.afterRakeRate && !_item.afterDeductionRatio && !_item.afterFinancingParty ) return;
          onMonify.call(this, {
            id: _item.id,
            merchantId,
            operation: 0,
          });
          break;
        case "agreeModify":
          if(!_item.afterDiscount && !_item.afterRakeRate && !_item.afterDeductionRatio && !_item.afterFinancingParty) return;
          onMonify.call(this, {
            id: _item.id,
            merchantId,
            operation: 1,
          });
          break;
        default:
          break;
      }
    }, 200),
  },
};
</script>

<style lang="less" scoped>
@primary: #feb518;
.listItem-wrap {
  width: 100%;
  border-radius: 15px;
  margin-top: 24px;
  background: #fff;
  padding-top: 14px;
  .listItem-hd {
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    font-size: 24px;
  }
  .listItem_status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 40px;
    > :first-child {
      padding: 13px 30px;
      background: #ffb72f;
      border-top-right-radius: 25px;
      border-bottom-right-radius: 25px;
      text-align: center;
      color: #fff;
      font-size: 26px;
    }
  }
  .listItem_status2 {
    margin: 0 auto;
    border-bottom: 1px solid #ececec;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 64px);
    padding-bottom: 30px;
    .left {
      font-size: 26px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #f05357;

    }
    .right {
      font-size: 26px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #131313;
      opacity: 0.6;
    }
  }
  .listItem-con {
    // box-sizing: border-box;
    width: 100%;
    padding: 22px 40px 26px 32px;
    font-size: 26px;
    .look_order {
      color: #ffb72f !important;
      display: flex;
      align-items: center;
    }
    .content {
      display: flex;
      margin-top: 15px;
      //   align-items: center;
      &:first-child {
        margin-top: 0 !important;
      }
      .left {
        flex: 1;
        margin-left: 10px;
        font-size: 26px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #131313;
        opacity: 0.8;
        word-break: break-all;
        display: flex;
        align-items: center;
        ._img {
          width: 36px;
          height: 36px;
          margin-right: 10px;
        }
      }
    }
    .top {
      margin-bottom: 40px !important;
      .right {
        font-size: 28px;
        padding-left: 5px;
      }
      .left {
        font-size: 32px;
        opacity: 1;
        font-weight: 800;
      }
    }
    // .listItem-con_item {
    //     width: 100%;
    //     display: flex;
    //     justify-content: space-between;
    //     align-items: center;
    //     font-size: 28px;
    //     margin-top: 20px;
    //     &:first-child {
    //         margin-top: 0;
    //     }
    //     .left {
    //         flex: 1;
    //         white-space: nowrap;
    //         overflow: hidden;
    //         text-overflow: ellipsis;
    //     }
    //     .right {
    //         flex: 0 0 200px;
    //         text-align: right;
    //     }
    // }
    // .origin {
    //     color: #131313;
    //     opacity: 0.8;
    // }
    // .new {
    //     color: #FE7316;
    //     font-weight: bold;
    // }
  }
  .btns {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 28px;
    margin-top: 20px;
    .btn {
      box-sizing: border-box;
      width: calc((100% / 3) - 30px);
      height: 56px;
      line-height: 58px;
      text-align: center;
      border-radius: 25px;
    }
    .btn-fill_confirm {
      background: @primary;
      color: #fff;
    }
    .btn-theme {
      border: 2px solid @primary;
      color: @primary;
    }
    .btn-blue {
      border: 2px solid #6a9cd5;
      color: #6a9cd5;
    }
    .btn-fill_cancle {
      background: #d6d6d6;
      color: #fff;
    }
    .btn-cancle {
      border: 2px solid #d6d6d6;
      color: #d6d6d6;
    }
  }
}
</style>